<template>
  <div class="my-spread">
    <div class="my-spread-contain">
      <div class="header">
        <div class="img">
          <img :src="user.headurl">
        </div>
        <div class="name">{{user.nickname || user.mname}}</div>
      </div>
      <div class="dividing"></div>
      <div class="code-img">
        <div class="code-img-img"></div>
      </div>
      <div class="code">推广码：Z7987</div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  name: 'my-spread',
  data () {
    return {
    }
  },
  mixins: [mixins],
  methods: {
  },
  mounted () {
    this.$BIND_LOADING(true)
  },
  components: {
  }
}
</script>

<style lang="stylus" scoped>
.my-spread {
  width: 100%;
  height: 100vh;
  background: RGBA(246, 246, 246, 1);
  padding-top: 80px;
  display: flex;
  justify-content: center;

  .my-spread-contain {
    height: 67%;
    width: 651px;
    background: white;

    .header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 176px;
      padding-left: 36px;

      .img {
        margin-right: 32px;
        width: 123px;
        height: 123px;

        img {
          width: 123px;
          border-radius: 50%;
          height: 123px;
        }
      }

      .name {
        font-size: 38px;
        color: rgba(51, 51, 51, 1);
      }
    }

    .dividing {
      background: RGBA(233, 233, 233, 1);
      width: 100%;
      height: 3px;
    }

    .code-img {
      margin-top: 60px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .code-img-img {
        width: 494px;
        height: 499px;
        background: red;
      }
    }

    .code {
      width: 100%;
      text-align: center;
      margin-top: 35px;
      font-size: 32px;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>
